<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 顶部导航栏 -->
        <Header />
        <!-- 左侧导航栏 -->
        <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
            <nav class="py-4">
                <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
                    <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
                        :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
                        <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
                        <span>{{ menu.name }}</span>
                        <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
                            :class="{ 'transform rotate-180': menu.expanded }"></i>
                    </div>
                    <div v-if="menu.expanded" class="bg-gray-900">
                        <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
                            class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
                            :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
                            <a v-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm">{{
                                submenu.name }}</a>
                            <span v-else class="text-sm" @click="selectSubmenu(index, subIndex)">{{ submenu.name
                            }}</span>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>
        <!-- 主内容区域 -->
        <main class="pt-16 pl-64">
            <div class="container mx-auto p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm mb-4 text-gray-500">
                    <span>首页</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>在线巡查</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-blue-600">企业信息汇总</span>
                </div>
                <!-- 企业概览统计 -->
                <div class="grid grid-cols-4 gap-4 mb-6">
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                            <i class="fas fa-building text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">企业总数</div>
                            <div class="text-2xl font-bold text-gray-900">{{ companyStats.total }}</div>
                            <div class="text-xs text-green-600 flex items-center">
                                <i class="fas fa-arrow-up mr-1"></i> 较上月增长 {{ companyStats.growthRate }}%
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
                            <i class="fas fa-check-circle text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">正常运营</div>
                            <div class="text-2xl font-bold text-gray-900">{{ companyStats.normal }}</div>
                            <div class="text-xs text-gray-500">占比 {{ companyStats.normalPercentage }}%</div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4">
                            <i class="fas fa-tools text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">整改中</div>
                            <div class="text-2xl font-bold text-gray-900">{{ companyStats.improving }}</div>
                            <div class="text-xs text-gray-500">占比 {{ companyStats.improvingPercentage }}%</div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-4">
                            <i class="fas fa-pause-circle text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">停产整顿</div>
                            <div class="text-2xl font-bold text-gray-900">{{ companyStats.suspended }}</div>
                            <div class="text-xs text-gray-500">占比 {{ companyStats.suspendedPercentage }}%</div>
                        </div>
                    </div>
                </div>
                <!-- 搜索筛选区域 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800">企业信息筛选</h2>
                        <div class="flex space-x-3">
                            <button
                                @click="refreshData"
                                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-sync-alt mr-2"></i> 刷新数据
                            </button>
                        </div>
                    </div>
                    <div class="grid grid-cols-5 gap-4">
                        <!-- 企业名称搜索 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">企业名称</label>
                            <div class="relative">
                                <input v-model="searchKeyword" type="text" placeholder="请输入企业名称"
                                    class="w-full bg-gray-100 border-none rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <i
                                    class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            </div>
                        </div>
                        <!-- 所属区域 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">所属区域</label>
                            <div class="relative">
                                <button
                                    @click.stop="toggleAreaDropdown"
                                    class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-1.5 rounded text-sm whitespace-nowrap cursor-pointer">
                                    <span>{{ selectedArea }}</span>
                                    <i class="fas fa-chevron-down text-xs" :class="{ 'rotate-180': showAreaDropdown }"></i>
                                </button>
                                <!-- 下拉菜单 -->
                                <div v-if="showAreaDropdown" 
                                     class="absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-md shadow-lg z-50 mt-1">
                                    <div v-for="area in areaOptions" :key="area"
                                         @click.stop="selectArea(area)"
                                         class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                                         :class="{ 'bg-blue-50 text-blue-600': selectedArea === area }">
                                        {{ area }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 企业类型 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">企业类型</label>
                            <div class="relative">
                                <button
                                    @click.stop="toggleTypeDropdown"
                                    class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-1.5 rounded text-sm whitespace-nowrap cursor-pointer">
                                    <span>{{ selectedType }}</span>
                                    <i class="fas fa-chevron-down text-xs" :class="{ 'rotate-180': showTypeDropdown }"></i>
                                </button>
                                <!-- 下拉菜单 -->
                                <div v-if="showTypeDropdown" 
                                     class="absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-md shadow-lg z-50 mt-1">
                                    <div v-for="type in typeOptions" :key="type"
                                         @click.stop="selectType(type)"
                                         class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                                         :class="{ 'bg-blue-50 text-blue-600': selectedType === type }">
                                        {{ type }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 运营状态 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">运营状态</label>
                            <div class="flex space-x-2">
                                <button v-for="(status, idx) in operationStatus" :key="idx"
                                    class="px-3 py-1.5 text-sm rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="status.active ? status.activeClass : 'bg-gray-100 text-gray-600'"
                                    @click="toggleStatus(idx)">
                                    <span class="w-2 h-2 rounded-full mr-1.5" :class="status.dotClass"></span>
                                    {{ status.name }}
                                </button>
                            </div>
                        </div>
                        <!-- 时间范围 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">数据时间范围</label>
                            <div class="relative">
                                <button
                                    @click.stop="toggleTimeDropdown"
                                    class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-1.5 rounded text-sm whitespace-nowrap cursor-pointer">
                                    <span>{{ selectedTimeRange }}</span>
                                    <i class="fas fa-chevron-down text-xs" :class="{ 'rotate-180': showTimeDropdown }"></i>
                                </button>
                                <!-- 下拉菜单 -->
                                <div v-if="showTimeDropdown" 
                                     class="absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-md shadow-lg z-50 mt-1">
                                    <div v-for="timeRange in timeRangeOptions" :key="timeRange"
                                         @click.stop="selectTimeRange(timeRange)"
                                         class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                                         :class="{ 'bg-blue-50 text-blue-600': selectedTimeRange === timeRange }">
                                        {{ timeRange }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end mt-4 space-x-3">
                        <button @click="resetFilters"
                            :disabled="!hasActiveFilters"
                            :class="[
                                'px-4 py-2 rounded flex items-center !rounded-button whitespace-nowrap',
                                hasActiveFilters 
                                    ? 'bg-gray-100 text-gray-700 cursor-pointer hover:bg-gray-200' 
                                    : 'bg-gray-50 text-gray-400 cursor-not-allowed'
                            ]">
                            <i class="fas fa-redo-alt mr-2"></i> 重置
                        </button>
                        <button @click="searchCompanies"
                            class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-search mr-2"></i> 搜索
                        </button>
                    </div>
                </div>
                <!-- 数据可视化区域 -->
                <div class="grid grid-cols-2 gap-6 mb-6">
                    <!-- 企业分布地图 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <h3 class="font-bold text-base text-gray-800 mb-3 flex items-center justify-between">
                            <span>企业地理分布</span>
                            <span class="text-xs text-blue-600 cursor-pointer" @click="openChartDetail('map')">查看详情</span>
                        </h3>
                        <div id="companyMapChart" class="h-64" ref="companyMapChart"></div>
                    </div>
                    <!-- 产能利用率趋势图 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <h3 class="font-bold text-base text-gray-800 mb-3 flex items-center justify-between">
                            <span>产能利用率趋势</span>
                            <span class="text-xs text-blue-600 cursor-pointer" @click="openChartDetail('capacity')">查看详情</span>
                        </h3>
                        <div id="capacityTrendChart" class="h-64" ref="capacityTrendChart"></div>
                    </div>
                    <!-- 安全隐患统计图 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <h3 class="font-bold text-base text-gray-800 mb-3 flex items-center justify-between">
                            <span>安全隐患统计</span>
                            <span class="text-xs text-blue-600 cursor-pointer" @click="openChartDetail('safety')">查看详情</span>
                        </h3>
                        <div id="safetyIssuesChart" class="h-64" ref="safetyIssuesChart"></div>
                    </div>
                    <!-- 环保达标率环形图 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <h3 class="font-bold text-base text-gray-800 mb-3 flex items-center justify-between">
                            <span>环保达标率</span>
                            <span class="text-xs text-blue-600 cursor-pointer" @click="openChartDetail('environmental')">查看详情</span>
                        </h3>
                        <div id="environmentalComplianceChart" class="h-64" ref="environmentalComplianceChart"></div>
                    </div>
                </div>
                <!-- 企业列表展示 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800">企业信息列表</h2>
                        <div class="flex space-x-3">
                            <button @click="exportCompanyData" :disabled="isExporting"
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed">
                                <i :class="isExporting ? 'fas fa-spinner fa-spin mr-2' : 'fas fa-download mr-2'"></i> 
                                {{ isExporting ? '导出中...' : '导出数据' }}
                            </button>
                            <button
                                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                                @click="showAddCompanyModal = true">
                                <i class="fas fa-plus mr-2"></i> 添加企业
                            </button>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        企业信息</th>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        生产情况</th>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        安全管理</th>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        环保监测</th>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        运营状态</th>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr v-for="(company, index) in paginatedCompanyList" :key="index" class="hover:bg-gray-50">
                                    <td class="px-6 py-4">
                                        <div class="flex items-center">
                                            <div
                                                class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                                                <i class="fas fa-industry"></i>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">{{ company.name }}</div>
                                                <div class="text-xs text-gray-500">{{ company.address }}</div>
                                                <div class="text-xs text-gray-500">联系人: {{ company.contact }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm text-gray-900">产能利用率: {{ company.capacity }}%</div>
                                        <div class="text-xs text-gray-500">主要产品: {{ company.products }}</div>
                                        <div class="text-xs text-gray-500">年产量: {{ company.production }}</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm text-gray-900">安全等级:
                                            <span
                                                class="px-2 py-0.5 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                :class="company.safetyLevelClass">
                                                {{ company.safetyLevel }}
                                            </span>
                                        </div>
                                        <div class="text-xs text-gray-500">隐患数量: {{ company.issues }}</div>
                                        <div class="text-xs text-gray-500">整改率: {{ company.improvementRate }}%</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm text-gray-900">排放达标率: {{ company.environmentalRate }}%</div>
                                        <div class="text-xs text-gray-500">监测状态:
                                            <span :class="company.monitoringStatusClass">{{ company.monitoringStatus
                                            }}</span>
                                        </div>
                                        <div class="text-xs text-gray-500">上次检查: {{ company.lastInspection }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="company.statusClass">
                                            {{ company.status }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <button @click="showCompanyDetails(company)"
                                                class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">详情</button>
                                            <button @click="editCompanyFromList(company)"
                                                class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">编辑</button>
                                            <button @click="exportCompanyReportFromList(company)"
                                                class="text-gray-600 hover:text-gray-800 !rounded-button whitespace-nowrap cursor-pointer">报告</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="flex justify-between items-center mt-4">
                        <div class="flex items-center space-x-4">
                            <div class="text-sm text-gray-500">
                                显示 {{ displayRange.start }} 至 {{ displayRange.end }} 条，共 {{ totalItems }} 条
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-500">每页显示:</span>
                                <select v-model="pageSize" @change="changePageSize(pageSize)" 
                                        class="px-2 py-1 border border-gray-300 rounded text-sm">
                                    <option v-for="size in pageSizeOptions" :key="size" :value="size">{{ size }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="flex space-x-1" v-if="totalPages > 1">
                            <button @click="prevPage" 
                                    :disabled="currentPage === 1"
                                    :class="[
                                        'px-3 py-1 rounded !rounded-button whitespace-nowrap',
                                        currentPage === 1 
                                            ? 'bg-gray-200 text-gray-400 cursor-not-allowed' 
                                            : 'bg-gray-100 text-gray-600 cursor-pointer hover:bg-gray-200'
                                    ]">
                                上一页
                            </button>
                            
                            <!-- 页码按钮 -->
                            <button v-for="page in visiblePages" :key="page"
                                    @click="goToPage(page)"
                                    :class="[
                                        'px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer',
                                        page === currentPage 
                                            ? 'bg-blue-600 text-white' 
                                            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                                    ]">
                                {{ page }}
                            </button>
                            
                            <button @click="nextPage" 
                                    :disabled="currentPage === totalPages"
                                    :class="[
                                        'px-3 py-1 rounded !rounded-button whitespace-nowrap',
                                        currentPage === totalPages 
                                            ? 'bg-gray-200 text-gray-400 cursor-not-allowed' 
                                            : 'bg-gray-100 text-gray-600 cursor-pointer hover:bg-gray-200'
                                    ]">
                                下一页
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 企业详情展示区域 -->
                <!-- 企业详情全屏模态框 -->
                <div v-if="showDetailsModal"
                    class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center overflow-y-auto">
                    <div class="bg-white w-11/12 max-w-7xl max-h-[90vh] rounded-lg shadow-2xl relative flex flex-col">
                        <!-- 模态框头部 -->
                        <div class="flex flex-col w-full">
                            <div class="flex justify-between items-center px-6 py-4 border-b">
                                <div class="flex items-center space-x-4">
                                    <h2 class="text-2xl font-bold text-gray-800">企业详情 - {{ selectedCompany.name }}</h2>
                                    <span class="px-2 py-1 text-sm rounded-full" :class="selectedCompany.statusClass">
                                        {{ selectedCompany.status }}
                                    </span>
                                </div>
                                <button @click="closeDetailsModal" class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-times text-xl"></i>
                                </button>
                            </div>
                            <!-- 企业关键指标概览 -->
                            <div class="grid grid-cols-4 gap-4 px-6 py-4 bg-gray-50">
                                <div
                                    class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow-sm">
                                    <div class="text-sm text-gray-600 mb-1">产能利用率</div>
                                    <div class="text-2xl font-bold text-blue-600">{{ selectedCompany.capacity }}%</div>
                                    <div class="text-xs text-gray-500 mt-1">较上月 +2.3%</div>
                                </div>
                                <div
                                    class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow-sm">
                                    <div class="text-sm text-gray-600 mb-1">安全评级</div>
                                    <div class="text-2xl font-bold text-green-600">{{ selectedCompany.safetyLevel }}
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1">安全隐患 {{ selectedCompany.issues }} 项</div>
                                </div>
                                <div
                                    class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow-sm">
                                    <div class="text-sm text-gray-600 mb-1">环保达标率</div>
                                    <div class="text-2xl font-bold text-green-600">{{ selectedCompany.environmentalRate
                                    }}%</div>
                                    <div class="text-xs text-gray-500 mt-1">{{ selectedCompany.monitoringStatus }}</div>
                                </div>
                                <div
                                    class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow-sm">
                                    <div class="text-sm text-gray-600 mb-1">整改完成率</div>
                                    <div class="text-2xl font-bold text-blue-600">{{ selectedCompany.improvementRate }}%
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1">剩余 {{ selectedCompany.issues }} 项待整改</div>
                                </div>
                            </div>
                            <!-- 最近动态 -->
                            <div class="px-6 py-4">
                                <h3 class="text-lg font-medium text-gray-800 mb-3">最近动态</h3>
                                <div class="space-y-3">
                                    <div class="flex items-center space-x-3 text-sm">
                                        <span class="text-gray-500">2025-07-08</span>
                                        <span class="text-blue-600">例行安全检查</span>
                                        <span class="text-gray-700">完成月度安全生产检查，发现 2 项隐患已整改完成</span>
                                    </div>
                                    <div class="flex items-center space-x-3 text-sm">
                                        <span class="text-gray-500">2025-07-05</span>
                                        <span class="text-green-600">环保监测</span>
                                        <span class="text-gray-700">废气排放监测数据正常，符合环保标准</span>
                                    </div>
                                    <div class="flex items-center space-x-3 text-sm">
                                        <span class="text-gray-500">2025-07-02</span>
                                        <span class="text-yellow-600">设备维护</span>
                                        <span class="text-gray-700">完成 3 号高炉年度检修维护工作</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 标签页导航 -->
                        <div class="px-6 pt-4 border-b">
                            <div class="flex space-x-6">
                                <button v-for="(tab, index) in detailTabs" :key="index"
                                    @click="switchDetailTab(tab.id)"
                                    class="px-4 py-2 font-medium text-sm transition-colors duration-200"
                                    :class="currentDetailTab === tab.id ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600 hover:text-gray-800'">
                                    <i :class="tab.icon + ' mr-2'"></i>{{ tab.name }}
                                </button>
                            </div>
                        </div>
                        <!-- 标签页内容区域 -->
                        <div class="flex-1 overflow-y-auto p-6">
                            <!-- 基本信息 -->
                            <div v-show="currentDetailTab === 'basic'" class="space-y-6">
                                <!-- 非编辑模式 -->
                                <div v-if="!isEditMode" class="grid grid-cols-2 gap-6">
                                    <div class="bg-gray-50 rounded-lg p-6">
                                        <h3 class="font-bold text-base text-gray-800 mb-4 flex items-center">
                                            <i class="fas fa-info-circle mr-2 text-blue-600"></i>
                                            企业基本信息
                                        </h3>
                                        <div class="space-y-4">
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">企业名称:</span>
                                                <span class="text-gray-900 font-medium">{{ selectedCompany.name }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">企业类型:</span>
                                                <span class="text-gray-900">{{ selectedCompany.type }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">所属区域:</span>
                                                <span class="text-gray-900">{{ selectedCompany.region }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">注册资本:</span>
                                                <span class="text-gray-900">{{ selectedCompany.capital }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">成立时间:</span>
                                                <span class="text-gray-900">{{ selectedCompany.established }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">统一社会信用代码:</span>
                                                <span class="text-gray-900">91130000XXXXXXXX8B</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">经营范围:</span>
                                                <span class="text-gray-900">钢铁冶炼、加工、销售</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bg-gray-50 rounded-lg p-6">
                                        <h3 class="font-bold text-base text-gray-800 mb-4 flex items-center">
                                            <i class="fas fa-user mr-2 text-blue-600"></i>
                                            联系方式
                                        </h3>
                                        <div class="space-y-4">
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">法定代表人:</span>
                                                <span class="text-gray-900">{{ selectedCompany.legalPerson }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">联系电话:</span>
                                                <span class="text-gray-900">{{ selectedCompany.phone }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">电子邮箱:</span>
                                                <span class="text-gray-900">contact@example.com</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">企业网站:</span>
                                                <span class="text-gray-900">www.example.com</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">企业地址:</span>
                                                <span class="text-gray-900">{{ selectedCompany.address }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">邮政编码:</span>
                                                <span class="text-gray-900">050000</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 编辑模式 -->
                                <div v-else class="bg-white rounded-lg p-6">
                                    <h3 class="font-bold text-lg text-gray-800 mb-6 flex items-center">
                                        <i class="fas fa-edit mr-2 text-blue-600"></i>
                                        编辑企业信息
                                    </h3>
                                    <div class="grid grid-cols-2 gap-6">
                                        <!-- 左列 -->
                                        <div class="space-y-4">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                                    企业名称 <span class="text-red-500">*</span>
                                                </label>
                                                <input v-model="editForm.name" type="text" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    :class="{ 'border-red-500': editFormErrors.name }"
                                                    placeholder="请输入企业名称">
                                                <p v-if="editFormErrors.name" class="mt-1 text-sm text-red-600">{{ editFormErrors.name }}</p>
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                                    企业类型 <span class="text-red-500">*</span>
                                                </label>
                                                <select v-model="editForm.type" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    :class="{ 'border-red-500': editFormErrors.type }">
                                                    <option value="">请选择企业类型</option>
                                                    <option value="大型钢铁联合企业">大型钢铁联合企业</option>
                                                    <option value="中型钢铁企业">中型钢铁企业</option>
                                                    <option value="小型钢铁企业">小型钢铁企业</option>
                                                    <option value="特种钢材企业">特种钢材企业</option>
                                                </select>
                                                <p v-if="editFormErrors.type" class="mt-1 text-sm text-red-600">{{ editFormErrors.type }}</p>
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                                    所属区域 <span class="text-red-500">*</span>
                                                </label>
                                                <input v-model="editForm.region" type="text" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    :class="{ 'border-red-500': editFormErrors.region }"
                                                    placeholder="请输入所属区域">
                                                <p v-if="editFormErrors.region" class="mt-1 text-sm text-red-600">{{ editFormErrors.region }}</p>
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">注册资本</label>
                                                <input v-model="editForm.capital" type="text" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    placeholder="请输入注册资本">
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">成立时间</label>
                                                <input v-model="editForm.established" type="date" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                                    法定代表人 <span class="text-red-500">*</span>
                                                </label>
                                                <input v-model="editForm.legalPerson" type="text" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    :class="{ 'border-red-500': editFormErrors.legalPerson }"
                                                    placeholder="请输入法定代表人">
                                                <p v-if="editFormErrors.legalPerson" class="mt-1 text-sm text-red-600">{{ editFormErrors.legalPerson }}</p>
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                                    联系电话 <span class="text-red-500">*</span>
                                                </label>
                                                <input v-model="editForm.phone" type="text" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    :class="{ 'border-red-500': editFormErrors.phone }"
                                                    placeholder="请输入联系电话">
                                                <p v-if="editFormErrors.phone" class="mt-1 text-sm text-red-600">{{ editFormErrors.phone }}</p>
                                            </div>
                                        </div>
                                        
                                        <!-- 右列 -->
                                        <div class="space-y-4">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                                    企业地址 <span class="text-red-500">*</span>
                                                </label>
                                                <textarea v-model="editForm.address" rows="3" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    :class="{ 'border-red-500': editFormErrors.address }"
                                                    placeholder="请输入企业地址"></textarea>
                                                <p v-if="editFormErrors.address" class="mt-1 text-sm text-red-600">{{ editFormErrors.address }}</p>
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">主要产品</label>
                                                <input v-model="editForm.products" type="text" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    placeholder="请输入主要产品">
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">年产量</label>
                                                <input v-model="editForm.production" type="text" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    placeholder="请输入年产量">
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">产能利用率 (%)</label>
                                                <input v-model.number="editForm.capacity" type="number" min="0" max="100" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    :class="{ 'border-red-500': editFormErrors.capacity }"
                                                    placeholder="请输入产能利用率">
                                                <p v-if="editFormErrors.capacity" class="mt-1 text-sm text-red-600">{{ editFormErrors.capacity }}</p>
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                                    运营状态 <span class="text-red-500">*</span>
                                                </label>
                                                <select v-model="editForm.status" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    :class="{ 'border-red-500': editFormErrors.status }">
                                                    <option value="">请选择运营状态</option>
                                                    <option value="正常运营">正常运营</option>
                                                    <option value="整改中">整改中</option>
                                                    <option value="停产整顿">停产整顿</option>
                                                </select>
                                                <p v-if="editFormErrors.status" class="mt-1 text-sm text-red-600">{{ editFormErrors.status }}</p>
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                                    安全等级 <span class="text-red-500">*</span>
                                                </label>
                                                <select v-model="editForm.safetyLevel" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    :class="{ 'border-red-500': editFormErrors.safetyLevel }">
                                                    <option value="">请选择安全等级</option>
                                                    <option value="A级">A级</option>
                                                    <option value="B级">B级</option>
                                                    <option value="C级">C级</option>
                                                </select>
                                                <p v-if="editFormErrors.safetyLevel" class="mt-1 text-sm text-red-600">{{ editFormErrors.safetyLevel }}</p>
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">环保设施</label>
                                                <textarea v-model="editForm.environmentalFacilities" rows="3" 
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    placeholder="请输入环保设施信息"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 生产情况 -->
                            <div v-show="currentDetailTab === 'production'" class="space-y-6">
                                <div class="grid grid-cols-2 gap-6">
                                    <div class="bg-gray-50 rounded-lg p-6">
                                        <h3 class="font-bold text-base text-gray-800 mb-4 flex items-center">
                                            <i class="fas fa-industry mr-2 text-green-600"></i>
                                            生产数据
                                        </h3>
                                        <div class="space-y-4">
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">主要产品:</span>
                                                <span class="text-gray-900">{{ selectedCompany.products }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">年产量:</span>
                                                <span class="text-gray-900">{{ selectedCompany.production }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">产能利用率:</span>
                                                <span class="text-gray-900">{{ selectedCompany.capacity }}%</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">员工人数:</span>
                                                <span class="text-gray-900">{{ selectedCompany.employees }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">研发人员:</span>
                                                <span class="text-gray-900">520人</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">质检人员:</span>
                                                <span class="text-gray-900">280人</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">年营业收入:</span>
                                                <span class="text-gray-900">￥168.5亿</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bg-gray-50 rounded-lg p-6">
                                        <h3 class="font-bold text-base text-gray-800 mb-4 flex items-center">
                                            <i class="fas fa-cogs mr-2 text-green-600"></i>
                                            设备信息
                                        </h3>
                                        <div class="space-y-4">
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">主要设备:</span>
                                                <span class="text-gray-900">{{ selectedCompany.equipment }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">生产线数量:</span>
                                                <span class="text-gray-900">{{ selectedCompany.productionLines }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">设备完好率:</span>
                                                <span class="text-gray-900">98.5%</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">自动化程度:</span>
                                                <span class="text-gray-900">85%</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">运营状态:</span>
                                                <span class="text-gray-900 px-2 py-0.5 rounded-full text-xs"
                                                    :class="selectedCompany.statusClass">
                                                    {{ selectedCompany.status }}
                                                </span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">最近检修:</span>
                                                <span class="text-gray-900">2025-06-15</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">下次检修计划:</span>
                                                <span class="text-gray-900">2025-12-15</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 安全环保 -->
                            <div v-show="currentDetailTab === 'safety'" class="space-y-6">
                                <div class="grid grid-cols-2 gap-6">
                                    <div class="bg-gray-50 rounded-lg p-6">
                                        <h3 class="font-bold text-base text-gray-800 mb-4 flex items-center">
                                            <i class="fas fa-shield-alt mr-2 text-red-600"></i>
                                            安全管理
                                        </h3>
                                        <div class="space-y-4">
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">安全等级:</span>
                                                <span class="text-gray-900 px-2 py-0.5 rounded-full text-xs"
                                                    :class="selectedCompany.safetyLevelClass">
                                                    {{ selectedCompany.safetyLevel }}
                                                </span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">安全隐患数:</span>
                                                <span class="text-gray-900">{{ selectedCompany.issues }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">整改率:</span>
                                                <span class="text-gray-900">{{ selectedCompany.improvementRate
                                                }}%</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">安全事故:</span>
                                                <span class="text-gray-900">{{ selectedCompany.accidents }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">安全培训次数:</span>
                                                <span class="text-gray-900">24次/年</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">应急演练次数:</span>
                                                <span class="text-gray-900">12次/年</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">安全投入:</span>
                                                <span class="text-gray-900">￥2.8亿/年</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bg-gray-50 rounded-lg p-6">
                                        <h3 class="font-bold text-base text-gray-800 mb-4 flex items-center">
                                            <i class="fas fa-leaf mr-2 text-green-600"></i>
                                            环保监测
                                        </h3>
                                        <div class="space-y-4">
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">排放达标率:</span>
                                                <span class="text-gray-900">{{ selectedCompany.environmentalRate
                                                }}%</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">监测状态:</span>
                                                <span class="text-gray-900"
                                                    :class="selectedCompany.monitoringStatusClass">
                                                    {{ selectedCompany.monitoringStatus }}
                                                </span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">环保设施:</span>
                                                <span class="text-gray-900">{{ selectedCompany.environmentalFacilities
                                                }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">排污许可证:</span>
                                                <span class="text-gray-900">{{ selectedCompany.pollutionPermit }}</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">环保投入:</span>
                                                <span class="text-gray-900">￥3.2亿/年</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">节能减排目标:</span>
                                                <span class="text-gray-900">年减排CO2 50万吨</span>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-gray-600">能源管理体系:</span>
                                                <span class="text-gray-900">ISO 50001认证</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 历史趋势 -->
                            <div v-show="currentDetailTab === 'history'" class="space-y-6">
                                <div class="bg-gray-50 rounded-lg p-6">
                                    <h3 class="font-bold text-base text-gray-800 mb-4">历史数据趋势</h3>
                                    <div ref="detailHistoryChart" style="width: 100%; height: 480px;"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 模态框底部 -->
                        <div class="px-6 py-4 border-t flex justify-end space-x-4">
                            <!-- 编辑模式下的按钮 -->
                            <template v-if="isEditMode">
                                <button @click="cancelEdit"
                                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200 transition-colors">
                                    <i class="fas fa-times mr-2"></i> 取消
                                </button>
                                <button @click="saveCompanyInfo"
                                    class="px-4 py-2 bg-green-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:bg-green-700 transition-colors">
                                    <i class="fas fa-save mr-2"></i> 保存
                                </button>
                            </template>
                            <!-- 非编辑模式下的按钮 -->
                            <template v-else>
                                <button @click="exportCompanyReport"
                                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200 transition-colors">
                                    <i class="fas fa-file-pdf mr-2"></i> 导出报告
                                </button>
                                <button @click="editCompanyInfo"
                                    class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:bg-blue-700 transition-colors">
                                    <i class="fas fa-edit mr-2"></i> 编辑信息
                                </button>
                                <button @click="closeDetailsModal"
                                    class="px-4 py-2 bg-gray-500 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                    <i class="fas fa-times mr-2"></i> 关闭
                                </button>
                            </template>
                        </div>
                    </div>
                </div>

            </div>
        </main>
        <!-- 添加企业模态框 -->
        <div v-if="showAddCompanyModal"
            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg shadow-xl w-3/4 max-h-90vh overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-bold text-gray-800">添加新企业</h2>
                        <button @click="showAddCompanyModal = false"
                            class="text-gray-500 hover:text-gray-700 cursor-pointer">
                            <i class="fas fa-times text-xl"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 gap-6">
                        <!-- 基本信息 -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h3 class="font-bold text-base text-gray-800 mb-4 flex items-center">
                                <i class="fas fa-info-circle mr-2 text-blue-600"></i>
                                基本信息
                            </h3>
                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">企业名称 <span
                                            class="text-red-500">*</span></label>
                                    <input v-model="newCompany.name" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入企业名称">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">企业类型 <span
                                            class="text-red-500">*</span></label>
                                    <div class="relative">
                                        <select v-model="newCompany.type"
                                            class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none">
                                            <option value="">请选择企业类型</option>
                                            <option value="大型钢铁联合企业">大型钢铁联合企业</option>
                                            <option value="中型钢铁企业">中型钢铁企业</option>
                                            <option value="小型钢铁企业">小型钢铁企业</option>
                                            <option value="特种钢材企业">特种钢材企业</option>
                                        </select>
                                        <div
                                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                            <i class="fas fa-chevron-down text-xs"></i>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">所属区域 <span
                                            class="text-red-500">*</span></label>
                                    <div class="relative">
                                        <select v-model="newCompany.region"
                                            class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none">
                                            <option value="">请选择所属区域</option>
                                            <option value="河北省石家庄市">河北省石家庄市</option>
                                            <option value="山东省泰安市">山东省泰安市</option>
                                            <option value="江苏省连云港市">江苏省连云港市</option>
                                            <option value="湖北省武汉市">湖北省武汉市</option>
                                            <option value="辽宁省鞍山市">辽宁省鞍山市</option>
                                        </select>
                                        <div
                                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                            <i class="fas fa-chevron-down text-xs"></i>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">注册资本</label>
                                    <input v-model="newCompany.capital" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入注册资本">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">成立时间</label>
                                    <input v-model="newCompany.established" type="date"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">法定代表人</label>
                                    <input v-model="newCompany.legalPerson" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入法定代表人">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
                                    <input v-model="newCompany.phone" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入联系电话">
                                </div>
                                <div class="col-span-3">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">企业地址</label>
                                    <input v-model="newCompany.address" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入企业地址">
                                </div>
                            </div>
                        </div>
                        <!-- 生产情况 -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h3 class="font-bold text-base text-gray-800 mb-4 flex items-center">
                                <i class="fas fa-industry mr-2 text-green-600"></i>
                                生产情况
                            </h3>
                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">主要产品 <span
                                            class="text-red-500">*</span></label>
                                    <input v-model="newCompany.products" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入主要产品">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">年产量 <span
                                            class="text-red-500">*</span></label>
                                    <input v-model="newCompany.production" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入年产量">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">产能利用率 (%)</label>
                                    <input v-model="newCompany.capacity" type="number" min="0" max="100"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入产能利用率">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">员工人数</label>
                                    <input v-model="newCompany.employees" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入员工人数">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">主要设备</label>
                                    <input v-model="newCompany.equipment" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入主要设备">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">生产线数量</label>
                                    <input v-model="newCompany.productionLines" type="number" min="0"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入生产线数量">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">运营状态 <span
                                            class="text-red-500">*</span></label>
                                    <div class="relative">
                                        <select v-model="newCompany.status"
                                            class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none">
                                            <option value="">请选择运营状态</option>
                                            <option value="正常运营">正常运营</option>
                                            <option value="整改中">整改中</option>
                                            <option value="停产整顿">停产整顿</option>
                                        </select>
                                        <div
                                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                            <i class="fas fa-chevron-down text-xs"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 安全环保 -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h3 class="font-bold text-base text-gray-800 mb-4 flex items-center">
                                <i class="fas fa-shield-alt mr-2 text-red-600"></i>
                                安全环保
                            </h3>
                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">安全等级</label>
                                    <div class="relative">
                                        <select v-model="newCompany.safetyLevel"
                                            class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none">
                                            <option value="">请选择安全等级</option>
                                            <option value="A级">A级</option>
                                            <option value="B级">B级</option>
                                            <option value="C级">C级</option>
                                        </select>
                                        <div
                                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                            <i class="fas fa-chevron-down text-xs"></i>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">安全隐患数</label>
                                    <input v-model="newCompany.issues" type="number" min="0"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入安全隐患数">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">整改率 (%)</label>
                                    <input v-model="newCompany.improvementRate" type="number" min="0" max="100"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入整改率">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">安全事故</label>
                                    <input v-model="newCompany.accidents" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入安全事故">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">排放达标率 (%)</label>
                                    <input v-model="newCompany.environmentalRate" type="number" min="0" max="100"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入排放达标率">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">监测状态</label>
                                    <div class="relative">
                                        <select v-model="newCompany.monitoringStatus"
                                            class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none">
                                            <option value="">请选择监测状态</option>
                                            <option value="在线正常">在线正常</option>
                                            <option value="部分异常">部分异常</option>
                                            <option value="数据异常">数据异常</option>
                                            <option value="离线">离线</option>
                                        </select>
                                        <div
                                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                            <i class="fas fa-chevron-down text-xs"></i>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">环保设施</label>
                                    <input v-model="newCompany.environmentalFacilities" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入环保设施">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">排污许可证</label>
                                    <input v-model="newCompany.pollutionPermit" type="text"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="请输入排污许可证">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6 space-x-3">
                        <button @click="showAddCompanyModal = false"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                            取消
                        </button>
                        <button @click="addNewCompany"
                            class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-check mr-2"></i> 确认添加
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表详情弹框 -->
        <div v-if="showChartDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-5xl max-h-[90vh] flex flex-col">
                <!-- 弹框标题 -->
                <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                    <h3 class="font-bold text-lg text-gray-800">{{ chartDetailTitle }}</h3>
                    <button @click="closeChartDetail" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <!-- 弹框内容 -->
                <div class="p-6 overflow-y-auto flex-1">
                    <!-- 企业地理分布详情 -->
                    <div v-if="currentChartType === 'map'" class="space-y-4">
                        <div id="detailMapChart" class="h-96" ref="detailMapChart"></div>
                        <div class="mt-4">
                            <h4 class="font-medium text-gray-700 mb-2">区域分布统计</h4>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">区域</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">企业数量</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">占比</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">产能规模</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr><td class="px-6 py-4 text-sm text-gray-900">华东地区</td><td class="px-6 py-4 text-sm text-gray-900">45</td><td class="px-6 py-4 text-sm text-gray-900">24.2%</td><td class="px-6 py-4 text-sm text-gray-900">1,250万吨</td></tr>
                                        <tr><td class="px-6 py-4 text-sm text-gray-900">华北地区</td><td class="px-6 py-4 text-sm text-gray-900">38</td><td class="px-6 py-4 text-sm text-gray-900">20.4%</td><td class="px-6 py-4 text-sm text-gray-900">1,100万吨</td></tr>
                                        <tr><td class="px-6 py-4 text-sm text-gray-900">华中地区</td><td class="px-6 py-4 text-sm text-gray-900">32</td><td class="px-6 py-4 text-sm text-gray-900">17.2%</td><td class="px-6 py-4 text-sm text-gray-900">950万吨</td></tr>
                                        <tr><td class="px-6 py-4 text-sm text-gray-900">华南地区</td><td class="px-6 py-4 text-sm text-gray-900">28</td><td class="px-6 py-4 text-sm text-gray-900">15.1%</td><td class="px-6 py-4 text-sm text-gray-900">800万吨</td></tr>
                                        <tr><td class="px-6 py-4 text-sm text-gray-900">西南地区</td><td class="px-6 py-4 text-sm text-gray-900">25</td><td class="px-6 py-4 text-sm text-gray-900">13.4%</td><td class="px-6 py-4 text-sm text-gray-900">720万吨</td></tr>
                                        <tr><td class="px-6 py-4 text-sm text-gray-900">东北地区</td><td class="px-6 py-4 text-sm text-gray-900">18</td><td class="px-6 py-4 text-sm text-gray-900">9.7%</td><td class="px-6 py-4 text-sm text-gray-900">650万吨</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 产能利用率趋势详情 -->
                    <div v-if="currentChartType === 'capacity'" class="space-y-4">
                        <div id="detailCapacityChart" class="h-96" ref="detailCapacityChart"></div>
                    </div>

                    <!-- 安全隐患统计详情 -->
                    <div v-if="currentChartType === 'safety'" class="space-y-4">
                        <div id="detailSafetyChart" class="h-96" ref="detailSafetyChart"></div>
                    </div>

                    <!-- 环保达标率详情 -->
                    <div v-if="currentChartType === 'environmental'" class="space-y-4">
                        <div id="detailEnvironmentalChart" class="h-96" ref="detailEnvironmentalChart"></div>
                    </div>
                </div>
                <!-- 弹框底部 -->
                <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-2">
                    <button @click="exportChartDetail" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
                        <i class="fas fa-download mr-2"></i>导出数据
                    </button>
                    <button @click="closeChartDetail" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import chinaMap from './1.js';
import Header from '../components/Header.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    components: {
    Header,
  },
    data() {
        return {
            showDetailsModal: false,
            currentDetailTab: 'basic',
            detailHistoryChart: null, // 详情历史趋势图表实例
            // 编辑相关变量
            isEditMode: false,
            editForm: {},
            editFormErrors: {},
            detailTabs: [
                { id: 'basic', name: '基本信息', icon: 'fas fa-info-circle' },
                { id: 'production', name: '生产情况', icon: 'fas fa-industry' },
                { id: 'safety', name: '安全环保', icon: 'fas fa-shield-alt' },
                { id: 'history', name: '历史趋势', icon: 'fas fa-chart-line' }
            ],
            mainMenus: [
                {
                    name: '监测报警',
                    icon: 'fas fa-bell',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
                        { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
                        { name: '区域化展示', active: false, link: '/regional-display' }
                    ]
                },
                {
                    name: '风险研判',
                    icon: 'fas fa-exclamation-triangle',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: false, link: '/risk-analysis' },
                        // { name: '重点风险提示', active: false, link: '/focus' },
                    ]
                },
                {
                    name: '在线巡查',
                    icon: 'fas fa-search',
                    expanded: true,
                    active: true,
                    subMenus: [
                        { name: '企业信息汇总', active: true, link: '/summary-information' },
                        { name: '巡查功能', active: false, link: '/patrol' },
                        { name: '检索功能', active: false, link: 'search' },
                        { name: '一屏汇聚展示', active: false, link: '/screen-display' }
                    ]
                },
                {
                    name: '综合分析',
                    icon: 'fas fa-chart-line',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '联网与设备分析', active: false, link: '/equipment' },
                        { name: '应用情况分析', active: false, link: '/application' },
                        { name: '数据质量分析', active: false, link: '/data-quality' },
                        { name: '定期专题报告', active: false, link: 'report' }
                    ]
                },
                {
                    name: '系统管理',
                    icon: 'fas fa-cog',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '用户权限管理', active: false, link: 'user-permission' },
                        { name: '系统配置管理', active: false, link: 'system-manage' },
                        { name: '数据管理', active: false, link: 'data-manage' },
                        { name: '系统监控与维护', active: false, link: 'monitoring' }
                    ]
                }
            ],
            selectedArea: '全部区域',
            selectedType: '全部类型',
            selectedTimeRange: '全部时间',
            searchKeyword: '', // 企业名称搜索关键词
            // 下拉菜单状态控制
            showAreaDropdown: false,
            showTypeDropdown: false,
            showTimeDropdown: false,
            // 下拉菜单选项
            areaOptions: ['全部区域', '华北地区', '华东地区', '华南地区', '华中地区', '西北地区', '西南地区', '东北地区'],
            typeOptions: ['全部类型', '大型钢铁企业', '中型钢铁企业', '小型钢铁企业', '特钢企业', '民营钢企', '国有钢企'],
            timeRangeOptions: ['全部时间', '近 7 天', '近 30 天', '近 90 天', '本月', '本季度', '本年度'],
            // 过滤后的企业列表
            filteredCompanyList: [],
            operationStatus: [
                { name: '全部', active: true, activeClass: 'bg-blue-100 text-blue-600', dotClass: 'bg-blue-600' },
                { name: '正常运营', active: false, activeClass: 'bg-green-100 text-green-600', dotClass: 'bg-green-600' },
                { name: '整改中', active: false, activeClass: 'bg-yellow-100 text-yellow-600', dotClass: 'bg-yellow-600' },
                // { name: '停产整顿', active: false, activeClass: 'bg-red-100 text-red-600', dotClass: 'bg-red-600' }
            ],
            companyList: [
                {
                    name: '河北钢铁集团有限公司',
                    address: '河北省石家庄市长安区建设南大街161号',
                    contact: '张经理 (138****5678)',
                    region: '华北地区',
                    type: '大型钢铁企业',
                    capacity: 85,
                    products: '钢板、钢管、型钢',
                    production: '500万吨/年',
                    safetyLevel: 'A级',
                    safetyLevelClass: 'bg-green-100 text-green-800',
                    issues: 3,
                    improvementRate: 92,
                    environmentalRate: 96,
                    monitoringStatus: '在线正常',
                    monitoringStatusClass: 'text-green-600',
                    lastInspection: '2025-10-05',
                    status: '正常运营',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '山东泰山钢铁有限公司',
                    address: '山东省泰安市泰山区钢城路88号',
                    contact: '李总监 (139****1234)',
                    region: '华东地区',
                    type: '大型钢铁企业',
                    capacity: 78,
                    products: '热轧板卷、冷轧板卷',
                    production: '380万吨/年',
                    safetyLevel: 'A级',
                    safetyLevelClass: 'bg-green-100 text-green-800',
                    issues: 5,
                    improvementRate: 85,
                    environmentalRate: 94,
                    monitoringStatus: '在线正常',
                    monitoringStatusClass: 'text-green-600',
                    lastInspection: '2025-10-12',
                    status: '正常运营',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '江苏沿海钢铁集团',
                    address: '江苏省连云港市连云区海滨大道256号',
                    contact: '王经理 (135****9876)',
                    region: '华东地区',
                    type: '大型钢铁企业',
                    capacity: 92,
                    products: '不锈钢板、特种钢材',
                    production: '420万吨/年',
                    safetyLevel: 'A级',
                    safetyLevelClass: 'bg-green-100 text-green-800',
                    issues: 2,
                    improvementRate: 95,
                    environmentalRate: 97,
                    monitoringStatus: '在线正常',
                    monitoringStatusClass: 'text-green-600',
                    lastInspection: '2025-09-16',
                    status: '正常运营',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '湖北武钢有限责任公司',
                    address: '湖北省武汉市青山区厂前街290号',
                    contact: '刘主管 (136****4321)',
                    region: '华中地区',
                    type: '大型钢铁企业',
                    capacity: 65,
                    products: '钢板、钢管、型钢',
                    production: '350万吨/年',
                    safetyLevel: 'B级',
                    safetyLevelClass: 'bg-yellow-100 text-yellow-800',
                    issues: 8,
                    improvementRate: 75,
                    environmentalRate: 86,
                    monitoringStatus: '数据异常',
                    monitoringStatusClass: 'text-yellow-600',
                    lastInspection: '2025-09-01',
                    status: '整改中',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    name: '辽宁鞍钢集团有限公司',
                    address: '辽宁省鞍山市铁东区和平路3号',
                    contact: '赵经理 (137****5432)',
                    region: '东北地区',
                    type: '大型钢铁企业',
                    capacity: 72,
                    products: '钢轨、H型钢、钢板',
                    production: '450万吨/年',
                    safetyLevel: 'A级',
                    safetyLevelClass: 'bg-green-100 text-green-800',
                    issues: 4,
                    improvementRate: 90,
                    environmentalRate: 93,
                    monitoringStatus: '在线正常',
                    monitoringStatusClass: 'text-green-600',
                    lastInspection: '2025-09-03',
                    status: '正常运营',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '河南安阳钢铁厂',
                    address: '河南省安阳市殷都区梅东路566号',
                    contact: '钱总监 (133****7890)',
                    region: '华中地区',
                    type: '中型钢铁企业',
                    capacity: 45,
                    products: '建筑钢材、钢筋',
                    production: '280万吨/年',
                    safetyLevel: 'C级',
                    safetyLevelClass: 'bg-red-100 text-red-800',
                    issues: 12,
                    improvementRate: 60,
                    environmentalRate: 75,
                    monitoringStatus: '离线',
                    monitoringStatusClass: 'text-red-600',
                    lastInspection: '2025-06-28',
                    status: '停产整顿',
                    statusClass: 'bg-red-100 text-red-800'
                },
                {
                    name: '重庆钢铁股份有限公司',
                    address: '重庆市长寿区钢城大道1号',
                    contact: '孙经理 (138****2345)',
                    region: '西南地区',
                    type: '大型钢铁企业',
                    capacity: 68,
                    products: '热轧板卷、中厚板',
                    production: '320万吨/年',
                    safetyLevel: 'B级',
                    safetyLevelClass: 'bg-yellow-100 text-yellow-800',
                    issues: 7,
                    improvementRate: 82,
                    environmentalRate: 88,
                    monitoringStatus: '部分异常',
                    monitoringStatusClass: 'text-yellow-600',
                    lastInspection: '2025-07-02',
                    status: '整改中',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    name: '云南昆钢钢铁集团',
                    address: '云南省昆明市安宁市昆钢路25号',
                    contact: '周主管 (135****6789)',
                    region: '西南地区',
                    type: '中型钢铁企业',
                    capacity: 75,
                    products: '钢板、钢管、型钢',
                    production: '300万吨/年',
                    safetyLevel: 'A级',
                    safetyLevelClass: 'bg-green-100 text-green-800',
                    issues: 5,
                    improvementRate: 88,
                    environmentalRate: 92,
                    monitoringStatus: '在线正常',
                    monitoringStatusClass: 'text-green-600',
                    lastInspection: '2025-07-04',
                    status: '正常运营',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '广东韶钢松山股份有限公司',
                    address: '广东省韶关市曲江区马坝镇',
                    contact: '吴经理 (139****3456)',
                    region: '华南地区',
                    type: '大型钢铁企业',
                    capacity: 82,
                    products: '优特钢、合金钢',
                    production: '350万吨/年',
                    safetyLevel: 'A级',
                    safetyLevelClass: 'bg-green-100 text-green-800',
                    issues: 3,
                    improvementRate: 94,
                    environmentalRate: 95,
                    monitoringStatus: '在线正常',
                    monitoringStatusClass: 'text-green-600',
                    lastInspection: '2025-07-05',
                    status: '正常运营',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '福建三钢闽光股份有限公司',
                    address: '福建省三明市梅列区工业路25号',
                    contact: '郑主管 (136****7890)',
                    region: '华东地区',
                    type: '中型钢铁企业',
                    capacity: 55,
                    products: '建筑钢材、钢筋',
                    production: '250万吨/年',
                    safetyLevel: 'C级',
                    safetyLevelClass: 'bg-red-100 text-red-800',
                    issues: 10,
                    improvementRate: 65,
                    environmentalRate: 78,
                    monitoringStatus: '离线',
                    monitoringStatusClass: 'text-red-600',
                    lastInspection: '2025-06-30',
                    status: '停产整顿',
                    statusClass: 'bg-red-100 text-red-800'
                }
            ],
            selectedCompany: {
                name: '河北钢铁集团有限公司',
                type: '大型钢铁联合企业',
                region: '河北省石家庄市',
                capital: '50亿元',
                established: '1995-08-15',
                legalPerson: '张志强',
                phone: '0311-88889999',
                address: '河北省石家庄市长安区建设南大街161号',
                products: '钢板、钢管、型钢',
                production: '500万吨/年',
                capacity: 85,
                employees: '5,200人',
                equipment: '高炉3座，转炉5座，连铸机4台',
                productionLines: '8条',
                status: '正常运营',
                statusClass: 'bg-green-100 text-green-800',
                lastInspection: '2025-07-05',
                safetyLevel: 'A级',
                safetyLevelClass: 'bg-green-100 text-green-800',
                issues: 3,
                improvementRate: 92,
                accidents: '近一年0起',
                environmentalRate: 96,
                monitoringStatus: '在线正常',
                monitoringStatusClass: 'text-green-600',
                environmentalFacilities: '脱硫脱硝装置，除尘系统，废水处理站',
                pollutionPermit: '有效期至2027-06-30'
            },
            showAddCompanyModal: false,
            newCompany: {
                name: '',
                type: '',
                region: '',
                capital: '',
                established: '',
                legalPerson: '',
                phone: '',
                address: '',
                products: '',
                production: '',
                capacity: '',
                employees: '',
                equipment: '',
                productionLines: '',
                status: '',
                safetyLevel: '',
                issues: '',
                improvementRate: '',
                accidents: '',
                environmentalRate: '',
                monitoringStatus: '',
                environmentalFacilities: '',
                pollutionPermit: ''
            },
            // 分页相关属性
            currentPage: 1,        // 当前页码
            pageSize: 10,          // 每页显示数量
            pageSizeOptions: [5, 10, 20, 50], // 每页数量选项
            
            // 导出状态
            isExporting: false,    // 是否正在导出
            exportProgress: 0,     // 导出进度
            
            // 图表详情弹框相关
            showChartDetailModal: false,  // 是否显示图表详情弹框
            currentChartType: '',         // 当前查看的图表类型
            chartDetailTitle: '',         // 图表详情标题
            detailChart: null            // 详情图表实例
        };
    },
    mounted() {
        // 初始化过滤后的企业列表
        this.filteredCompanyList = [...this.companyList];
        
        // 确保DOM元素完全渲染后再初始化图表
        this.$nextTick(() => {
            this.initCompanyMapChart();
            this.initCapacityTrendChart();
            this.initSafetyIssuesChart();
            this.initEnvironmentalComplianceChart();
        });
        
        // 响应窗口大小变化
        window.addEventListener('resize', this.handleResize);
        // 点击外部关闭下拉菜单
        document.addEventListener('click', this.handleClickOutside);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        document.removeEventListener('click', this.handleClickOutside);
    },
    computed: {
        // 检测是否有筛选条件被选中
        hasActiveFilters() {
            // 检查搜索关键词
            if (this.searchKeyword && this.searchKeyword.trim() !== '') {
                return true;
            }
            
            // 检查区域筛选
            if (this.selectedArea !== '全部区域') {
                return true;
            }
            
            // 检查类型筛选
            if (this.selectedType !== '全部类型') {
                return true;
            }
            
            // 检查时间范围筛选
            if (this.selectedTimeRange !== '全部时间') {
                return true;
            }
            
            // 检查运营状态筛选（除了"全部"之外的其他状态）
            const activeStatus = this.operationStatus.find(status => status.active);
            if (activeStatus && activeStatus.name !== '全部') {
                return true;
            }
            
            return false;
        },
        // 企业统计数据
        companyStats() {
            const total = this.filteredCompanyList.length;
            const normalCount = this.filteredCompanyList.filter(company => company.status === '正常运营').length;
            const improvingCount = this.filteredCompanyList.filter(company => company.status === '整改中').length;
            const suspendedCount = this.filteredCompanyList.filter(company => company.status === '停产整顿').length;
            
            // 基于企业总数计算动态增长率（模拟数据）
            const baseGrowthRate = total > 100 ? 5.2 : total > 50 ? 3.8 : 2.1;
            const growthRate = (baseGrowthRate + (total % 10) * 0.1).toFixed(1);
            
            return {
                total,
                normal: normalCount,
                improving: improvingCount,
                suspended: suspendedCount,
                normalPercentage: total > 0 ? ((normalCount / total) * 100).toFixed(1) : 0,
                improvingPercentage: total > 0 ? ((improvingCount / total) * 100).toFixed(1) : 0,
                suspendedPercentage: total > 0 ? ((suspendedCount / total) * 100).toFixed(1) : 0,
                growthRate: growthRate
            };
        },
        // 分页相关计算属性
        totalItems() {
            return this.filteredCompanyList.length;
        },
        totalPages() {
            return Math.ceil(this.totalItems / this.pageSize);
        },
        paginatedCompanyList() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.filteredCompanyList.slice(start, end);
        },
        displayRange() {
            const start = (this.currentPage - 1) * this.pageSize + 1;
            const end = Math.min(this.currentPage * this.pageSize, this.totalItems);
            return { start, end };
        },
        // 分页按钮显示逻辑
        visiblePages() {
            const pages = [];
            const maxVisible = 5; // 最多显示5个页码按钮
            
            if (this.totalPages <= maxVisible) {
                // 如果总页数不超过最大显示数，显示所有页码
                for (let i = 1; i <= this.totalPages; i++) {
                    pages.push(i);
                }
            } else {
                // 复杂的分页逻辑
                const half = Math.floor(maxVisible / 2);
                let start = Math.max(1, this.currentPage - half);
                let end = Math.min(this.totalPages, start + maxVisible - 1);
                
                // 调整起始位置
                if (end - start + 1 < maxVisible) {
                    start = Math.max(1, end - maxVisible + 1);
                }
                
                for (let i = start; i <= end; i++) {
                    pages.push(i);
                }
            }
            
            return pages;
        }
    },
    methods: {
        // 图表详情相关方法
        openChartDetail(chartType) {
            this.currentChartType = chartType;
            this.showChartDetailModal = true;
            
            // 设置弹框标题
            const titles = {
                'map': '企业地理分布详情',
                'capacity': '产能利用率趋势详情',
                'safety': '安全隐患统计详情',
                'environmental': '环保达标率详情'
            };
            this.chartDetailTitle = titles[chartType] || '图表详情';
            
            // 在下一个tick中初始化图表
            this.$nextTick(() => {
                this.initDetailChart(chartType);
            });
        },
        
        closeChartDetail() {
            this.showChartDetailModal = false;
            this.currentChartType = '';
            this.chartDetailTitle = '';
            // 销毁图表实例
            if (this.detailChart) {
                this.detailChart.dispose();
                this.detailChart = null;
            }
        },
        
        initDetailChart(chartType) {
            let chartContainer;
            
            switch(chartType) {
                case 'map':
                    chartContainer = this.$refs.detailMapChart;
                    if (chartContainer) {
                        this.detailChart = this.$echarts.init(chartContainer);
                        this.initDetailMapChart();
                    }
                    break;
                case 'capacity':
                    chartContainer = this.$refs.detailCapacityChart;
                    if (chartContainer) {
                        this.detailChart = this.$echarts.init(chartContainer);
                        this.initDetailCapacityChart();
                    }
                    break;
                case 'safety':
                    chartContainer = this.$refs.detailSafetyChart;
                    if (chartContainer) {
                        this.detailChart = this.$echarts.init(chartContainer);
                        this.initDetailSafetyChart();
                    }
                    break;
                case 'environmental':
                    chartContainer = this.$refs.detailEnvironmentalChart;
                    if (chartContainer) {
                        this.detailChart = this.$echarts.init(chartContainer);
                        this.initDetailEnvironmentalChart();
                    }
                    break;
            }
        },
        
        initDetailMapChart() {
            const option = {
                title: {
                    text: '全国企业分布地图',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return `${params.name}<br/>企业数量: ${params.value || 0}家`;
                    }
                },
                visualMap: {
                    min: 0,
                    max: 50,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],
                    calculable: true,
                    inRange: {
                        color: ['#e0f3ff', '#006edd']
                    }
                },
                series: [{
                    name: '企业数量',
                    type: 'map',
                    map: 'china',
                    roam: false,
                    data: [
                        {name: '北京', value: 15},
                        {name: '天津', value: 8},
                        {name: '上海', value: 25},
                        {name: '重庆', value: 12},
                        {name: '河北', value: 18},
                        {name: '河南', value: 22},
                        {name: '云南', value: 9},
                        {name: '辽宁', value: 14},
                        {name: '黑龙江', value: 7},
                        {name: '湖南', value: 16},
                        {name: '安徽', value: 13},
                        {name: '山东', value: 28},
                        {name: '新疆', value: 5},
                        {name: '江苏', value: 32},
                        {name: '浙江', value: 24},
                        {name: '江西', value: 11},
                        {name: '湖北', value: 17},
                        {name: '广西', value: 10},
                        {name: '甘肃', value: 6},
                        {name: '山西', value: 15},
                        {name: '内蒙古', value: 8},
                        {name: '陕西', value: 12},
                        {name: '吉林', value: 9},
                        {name: '福建', value: 19},
                        {name: '贵州', value: 7},
                        {name: '广东', value: 35},
                        {name: '青海', value: 3},
                        {name: '西藏', value: 2},
                        {name: '四川', value: 20},
                        {name: '宁夏', value: 4},
                        {name: '海南', value: 5},
                        {name: '台湾', value: 0},
                        {name: '香港', value: 0},
                        {name: '澳门', value: 0}
                    ]
                }]
            };
            this.detailChart.setOption(option);
        },
        
        initDetailCapacityChart() {
            const option = {
                title: {
                    text: '产能利用率趋势分析',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['大型企业', '中型企业', '小型企业', '行业平均'],
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value',
                    name: '利用率(%)',
                    min: 0,
                    max: 100
                },
                series: [
                    {
                        name: '大型企业',
                        type: 'line',
                        data: [85, 87, 89, 91, 88, 86, 84, 87, 89, 92, 90, 88],
                        smooth: true,
                        lineStyle: { color: '#1890ff' }
                    },
                    {
                        name: '中型企业',
                        type: 'line',
                        data: [78, 80, 82, 85, 83, 81, 79, 82, 84, 87, 85, 83],
                        smooth: true,
                        lineStyle: { color: '#52c41a' }
                    },
                    {
                        name: '小型企业',
                        type: 'line',
                        data: [65, 68, 70, 72, 69, 67, 65, 68, 70, 73, 71, 69],
                        smooth: true,
                        lineStyle: { color: '#faad14' }
                    },
                    {
                        name: '行业平均',
                        type: 'line',
                        data: [76, 78, 80, 83, 80, 78, 76, 79, 81, 84, 82, 80],
                        smooth: true,
                        lineStyle: { color: '#f5222d', type: 'dashed' }
                    }
                ]
            };
            this.detailChart.setOption(option);
        },
        
        initDetailSafetyChart() {
            const option = {
                title: {
                    text: '安全隐患分类统计',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'middle'
                },
                series: [
                    {
                        name: '隐患类型',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['60%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 35, name: '设备安全隐患', itemStyle: {color: '#ff4d4f'}},
                            {value: 28, name: '环境安全隐患', itemStyle: {color: '#faad14'}},
                            {value: 22, name: '操作安全隐患', itemStyle: {color: '#1890ff'}},
                            {value: 15, name: '管理安全隐患', itemStyle: {color: '#52c41a'}}
                        ]
                    }
                ]
            };
            this.detailChart.setOption(option);
        },
        
        initDetailEnvironmentalChart() {
            const option = {
                title: {
                    text: '环保指标达标情况',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['达标企业', '整改企业', '超标企业'],
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['废水排放', '废气排放', '噪声控制', '固废处理', '能耗控制']
                },
                yAxis: {
                    type: 'value',
                    name: '企业数量'
                },
                series: [
                    {
                        name: '达标企业',
                        type: 'bar',
                        stack: '总量',
                        data: [145, 138, 152, 141, 149],
                        itemStyle: { color: '#52c41a' }
                    },
                    {
                        name: '整改企业',
                        type: 'bar',
                        stack: '总量',
                        data: [28, 35, 22, 31, 26],
                        itemStyle: { color: '#faad14' }
                    },
                    {
                        name: '超标企业',
                        type: 'bar',
                        stack: '总量',
                        data: [13, 15, 12, 16, 11],
                        itemStyle: { color: '#ff4d4f' }
                    }
                ]
            };
            this.detailChart.setOption(option);
        },
        
        exportChartDetail() {
            // 导出当前图表详情数据
            const fileName = `${this.chartDetailTitle}_${new Date().toISOString().split('T')[0]}.png`;
            if (this.detailChart) {
                const url = this.detailChart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                });
                const link = document.createElement('a');
                link.download = fileName;
                link.href = url;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        },
        
        // 下拉菜单控制方法
        toggleAreaDropdown() {
            this.showAreaDropdown = !this.showAreaDropdown;
            this.showTypeDropdown = false; // 关闭其他下拉菜单
            this.showTimeDropdown = false;
        },
        toggleTypeDropdown() {
            this.showTypeDropdown = !this.showTypeDropdown;
            this.showAreaDropdown = false; // 关闭其他下拉菜单
            this.showTimeDropdown = false;
        },
        selectArea(area) {
            this.selectedArea = area;
            this.showAreaDropdown = false;
            // 这里可以添加筛选逻辑
        },
        selectType(type) {
            this.selectedType = type;
            this.showTypeDropdown = false;
            // 这里可以添加筛选逻辑
        },
        toggleTimeDropdown() {
            this.showTimeDropdown = !this.showTimeDropdown;
            this.showAreaDropdown = false; // 关闭其他下拉菜单
            this.showTypeDropdown = false;
        },
        selectTimeRange(timeRange) {
            this.selectedTimeRange = timeRange;
            this.showTimeDropdown = false;
            // 这里可以添加筛选逻辑
        },
        // 点击外部关闭下拉菜单
        closeDropdowns() {
            this.showAreaDropdown = false;
            this.showTypeDropdown = false;
            this.showTimeDropdown = false;
        },
        handleClickOutside(event) {
            // 检查点击是否在下拉菜单外部
            const areaDropdown = this.$el.querySelector('.relative');
            if (areaDropdown && !areaDropdown.contains(event.target)) {
                this.closeDropdowns();
            }
        },
        // 搜索企业
        searchCompanies() {
            let filtered = [...this.companyList];
            
            // 根据企业名称筛选
            if (this.searchKeyword && this.searchKeyword.trim()) {
                const keyword = this.searchKeyword.trim().toLowerCase();
                filtered = filtered.filter(company => 
                    company.name.toLowerCase().includes(keyword)
                );
            }
            
            // 根据区域筛选
            if (this.selectedArea !== '全部区域') {
                filtered = filtered.filter(company => company.region === this.selectedArea);
            }
            
            // 根据企业类型筛选
            if (this.selectedType !== '全部类型') {
                filtered = filtered.filter(company => company.type === this.selectedType);
            }
            
            // 根据运营状态筛选
            const activeStatus = this.operationStatus.find(status => status.active);
            if (activeStatus && activeStatus.name !== '全部') {
                filtered = filtered.filter(company => company.status === activeStatus.name);
            }
            
            // 根据时间范围筛选
            // 移除对"近30天"的特殊处理，让所有时间选项都进行筛选
            const now = new Date();
            let filterDate = new Date();
            
            switch(this.selectedTimeRange) {
                case '近 7 天':
                    filterDate.setDate(now.getDate() - 7);
                    break;
                case '近 30 天':
                    filterDate.setDate(now.getDate() - 30);
                    break;
                case '近 90 天':
                    filterDate.setDate(now.getDate() - 90);
                    break;
                case '本月':
                    filterDate = new Date(now.getFullYear(), now.getMonth(), 1);
                    break;
                case '本季度':
                    const quarter = Math.floor(now.getMonth() / 3);
                    filterDate = new Date(now.getFullYear(), quarter * 3, 1);
                    break;
                case '本年度':
                    filterDate = new Date(now.getFullYear(), 0, 1);
                    break;
                default:
                    // 如果是"全部时间"或其他选项，不进行时间筛选
                    filterDate = null;
                    break;
            }
            
            // 根据最后检查时间筛选
            if (filterDate) {
                filtered = filtered.filter(company => {
                    if (company.lastInspection) {
                        const inspectionDate = new Date(company.lastInspection);
                        return inspectionDate >= filterDate;
                    }
                    return false; // 如果没有检查时间，在时间筛选时排除
                });
            }
            
            this.filteredCompanyList = filtered;
            
            // 重新初始化图表以反映筛选后的数据
            this.$nextTick(() => {
                this.initCompanyMapChart();
                this.initCapacityTrendChart();
                this.initSafetyIssuesChart();
                this.initEnvironmentalComplianceChart();
            });
        },
        // 重置筛选条件
        resetFilters() {
            this.searchKeyword = ''; // 清空搜索关键词
            this.selectedArea = '全部区域';
            this.selectedType = '全部类型';
            this.selectedTimeRange = '全部时间';
            
            // 重置运营状态为"全部"
            this.operationStatus.forEach(status => {
                status.active = status.name === '全部';
            });
            
            // 显示所有企业
            this.filteredCompanyList = [...this.companyList];
            
            // 重新初始化图表以反映重置后的数据
            this.$nextTick(() => {
                this.initCompanyMapChart();
                this.initCapacityTrendChart();
                this.initSafetyIssuesChart();
                this.initEnvironmentalComplianceChart();
            });
        },
        // 刷新数据
        refreshData() {
            // 重新应用当前的筛选条件
            this.searchCompanies();
            
            // 显示刷新成功提示
            const successTip = document.createElement('div');
            successTip.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
            successTip.innerHTML = `
                <div class="flex items-center">
                    <i class="fas fa-check-circle mr-2"></i>
                    <span>数据刷新成功</span>
                </div>
            `;
            document.body.appendChild(successTip);

            // 3秒后移除提示
            setTimeout(() => {
                if (successTip && successTip.parentNode) {
                    successTip.parentNode.removeChild(successTip);
                }
            }, 3000);
            
            
        },
        showCompanyDetails(company) {
            this.selectedCompany = company;
            this.showDetailsModal = true;
            this.currentDetailTab = 'basic';
            // 清理之前的图表实例
            if (this.detailHistoryChart) {
                this.detailHistoryChart.dispose();
                this.detailHistoryChart = null;
            }
        },
        // 新增：关闭详情弹框的方法
        closeDetailsModal() {
            // 清理图表实例
            if (this.detailHistoryChart) {
                this.detailHistoryChart.dispose();
                this.detailHistoryChart = null;
            }
            this.showDetailsModal = false;
        },
        // 新增：切换详情标签页的方法
        switchDetailTab(tabId) {
            this.currentDetailTab = tabId;
            // 如果切换到历史趋势标签页，初始化图表
            if (tabId === 'history') {
                this.$nextTick(() => {
                    this.initDetailHistoryChart();
                });
            }
        },
        // 新增：初始化详情历史趋势图表的方法
        initDetailHistoryChart() {
            if (this.$refs.detailHistoryChart) {
                // 清理之前的图表实例
                if (this.detailHistoryChart) {
                    this.detailHistoryChart.dispose();
                }
                
                this.detailHistoryChart = echarts.init(this.$refs.detailHistoryChart);
                const option = {
                    animation: false,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['产能利用率', '安全隐患数', '环保达标率'],
                        top: 0,
                        right: 0
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '8%',
                        top: '15%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['2024-Q3', '2024-Q4', '2025-Q1', '2025-Q2', '2025-Q3'],
                            axisLine: {
                                lineStyle: {
                                    color: '#e2e8f0'
                                }
                            },
                            axisLabel: {
                                color: '#718096'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '百分比',
                            min: 0,
                            max: 100,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#4299e1'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%',
                                color: '#4299e1'
                            }
                        },
                        {
                            type: 'value',
                            name: '隐患数',
                            min: 0,
                            max: 20,
                            position: 'right',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f56565'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}',
                                color: '#f56565'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '产能利用率',
                            type: 'line',
                            yAxisIndex: 0,
                            data: [75, 78, 80, 82, 85],
                            itemStyle: {
                                color: '#4299e1'
                            }
                        },
                        {
                            name: '环保达标率',
                            type: 'line',
                            yAxisIndex: 0,
                            data: [88, 90, 92, 94, 96],
                            itemStyle: {
                                color: '#48bb78'
                            }
                        },
                        {
                            name: '安全隐患数',
                            type: 'bar',
                            yAxisIndex: 1,
                            data: [12, 10, 7, 5, 3],
                            itemStyle: {
                                color: '#f56565'
                            }
                        }
                    ]
                };
                this.detailHistoryChart.setOption(option);
                
                // 确保图表正确渲染
                setTimeout(() => {
                    if (this.detailHistoryChart) {
                        this.detailHistoryChart.resize();
                    }
                }, 100);
            }
        },
        toggleMenu(index) {
            this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
            // 如果展开了菜单，则将其他菜单收起
            if (this.mainMenus[index].expanded) {
                this.mainMenus.forEach((menu, i) => {
                    if (i !== index) {
                        menu.expanded = false;
                    }
                });
            }
        },
        selectSubmenu(menuIndex, submenuIndex) {
            // 重置所有菜单的激活状态
            this.mainMenus.forEach(menu => {
                menu.active = false;
                menu.subMenus.forEach(submenu => {
                    submenu.active = false;
                });
            });
            // 设置当前选中的菜单和子菜单为激活状态
            this.mainMenus[menuIndex].active = true;
            this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
            const link = this.mainMenus[menuIndex].subMenus[submenuIndex].link;
            if (link) {
                const dest = link.startsWith('/') ? link : `/${link}`;
                this.$router.push(dest);
            }
        },
        toggleStatus(index) {
            if (index === 0) {
                // 如果点击"全部"，则只激活"全部"
                this.operationStatus.forEach((status, i) => {
                    status.active = i === 0;
                });
            } else {
                // 如果点击其他状态，则取消"全部"的激活状态
                this.operationStatus[0].active = false;
                // 切换当前点击的状态的激活状态
                this.operationStatus[index].active = !this.operationStatus[index].active;
                // 如果所有具体状态都未激活，则激活"全部"
                const anyActive = this.operationStatus.slice(1).some(status => status.active);
                if (!anyActive) {
                    this.operationStatus[0].active = true;
                }
            }
        },
        handleResize() {
            const charts = [
                this.$refs.companyMapChart,
                this.$refs.capacityTrendChart,
                this.$refs.safetyIssuesChart,
                this.$refs.environmentalComplianceChart
            ];
            charts.forEach(ref => {
                if (ref) {
                    const chart = echarts.getInstanceByDom(ref);
                    if (chart) {
                        chart.resize();
                    }
                }
            });
        },
        initCompanyMapChart() {
            // 检查DOM元素是否存在
            if (!this.$refs.companyMapChart) {
                return;
            }
            
            // 注册中国地图数据
            chinaMap(echarts);
            const chart = echarts.init(this.$refs.companyMapChart);
            
            // 地区到省份的映射关系
            const regionToProvinceMap = {
                '华北地区': ['北京', '天津', '河北', '山西', '内蒙古'],
                '华东地区': ['上海', '江苏', '浙江', '安徽', '福建', '江西', '山东'],
                '华中地区': ['河南', '湖北', '湖南'],
                '华南地区': ['广东', '广西', '海南'],
                '西南地区': ['重庆', '四川', '贵州', '云南', '西藏'],
                '西北地区': ['陕西', '甘肃', '青海', '宁夏', '新疆'],
                '东北地区': ['辽宁', '吉林', '黑龙江']
            };
            
            // 基于企业数据动态统计各地区企业数量
            const regionStats = {};
            this.filteredCompanyList.forEach(company => {
                if (company.region) {
                    regionStats[company.region] = (regionStats[company.region] || 0) + 1;
                }
            });
            
            // 将地区数据映射到具体省份
            const provinceStats = {};
            Object.keys(regionStats).forEach(region => {
                const provinces = regionToProvinceMap[region];
                if (provinces) {
                    const enterpriseCount = regionStats[region];
                    const countPerProvince = Math.ceil(enterpriseCount / provinces.length);
                    provinces.forEach((province, index) => {
                        // 为了更真实的分布，给不同省份分配不同的企业数量
                        let count = countPerProvince;
                        if (index === 0) {
                            // 第一个省份分配稍多一些企业
                            count = Math.ceil(enterpriseCount * 0.4);
                        } else if (index === 1 && provinces.length > 1) {
                            // 第二个省份分配中等数量
                            count = Math.ceil(enterpriseCount * 0.3);
                        } else {
                            // 其他省份平均分配剩余企业
                            const remaining = enterpriseCount - Math.ceil(enterpriseCount * 0.4) - Math.ceil(enterpriseCount * 0.3);
                            count = Math.max(1, Math.floor(remaining / (provinces.length - 2)));
                        }
                        provinceStats[province] = count;
                    });
                }
            });
            
            // 转换为图表数据格式
            const mapData = Object.keys(provinceStats).map(province => ({
                name: province,
                value: provinceStats[province]
            }));
            
            // 计算最大值用于visualMap
            const maxValue = Math.max(...Object.values(provinceStats), 1);
            
            const option = {
                title: {
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: '#333',
                        fontSize: 16,
                        fontWeight: 'normal'
                    },
                    subtextStyle: {
                        color: '#666'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return `${params.name}<br/>企业数量: ${params.value || 0} 家<br/>分布密度: ${params.value >= maxValue * 0.8 ? '高密度' :
                            params.value >= maxValue * 0.5 ? '中密度' :
                                params.value >= maxValue * 0.2 ? '低密度' :
                                    '极少'
                            }`;
                    }
                },
                visualMap: {
                    min: 0,
                    max: maxValue,
                    left: 30,
                    bottom: 30,
                    text: ['企业多', '企业少'],
                    inRange: {
                        color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695']
                    },
                    calculable: true,
                    textStyle: {
                        color: '#666'
                    },
                    dimension: 0
                },
                toolbox: {
                    show: true,
                    right: 30,
                    top: 20,
                    feature: {
                        dataView: { show: true, readOnly: true },
                        saveAsImage: { show: true },
                    }
                },
                series: [
                    {
                        name: '企业数量',
                        type: 'map',
                        map: 'china',
                        roam: true,
                        zoom: 1,
                        center: [104.0, 37.5],
                        scaleLimit: {
                            min: 0.8,
                            max: 3
                        },
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize: 10
                        },
                        emphasis: {
                            label: {
                                show: true,
                                color: '#fff',
                                fontSize: 12,
                                fontWeight: 'bold'
                            },
                            itemStyle: {
                                areaColor: '#ff7875'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        data: mapData
                    }
                ]
            };
            chart.setOption(option);
        },
        initCapacityTrendChart() {
            // 检查DOM元素是否存在
            if (!this.$refs.capacityTrendChart) {
                return;
            }
            
            const chart = echarts.init(this.$refs.capacityTrendChart);
            
            // 基于企业数据动态计算产能利用率趋势
            const capacityData = this.filteredCompanyList
                .filter(company => company.capacity && !isNaN(company.capacity))
                .map(company => parseFloat(company.capacity));
            
            // 计算平均产能利用率
            const avgCapacity = capacityData.length > 0 
                ? capacityData.reduce((sum, capacity) => sum + capacity, 0) / capacityData.length 
                : 75;
            
            // 生成模拟的月度趋势数据（基于当前平均值的波动）
            const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'];
            const capacityTrend = [];
            const industryAverage = [];
            
            for (let i = 0; i < months.length; i++) {
                // 基于平均值生成趋势，添加一些随机波动
                const variation = (Math.random() - 0.5) * 10; // ±5%的波动
                const monthlyCapacity = Math.max(0, Math.min(100, avgCapacity + variation + i * 2)); // 整体上升趋势
                capacityTrend.push(Math.round(monthlyCapacity * 100) / 100);
                
                // 行业平均稍低于企业平均
                const industryVariation = (Math.random() - 0.5) * 8;
                const industryMonthly = Math.max(0, Math.min(100, avgCapacity - 5 + industryVariation + i * 1.5));
                industryAverage.push(Math.round(industryMonthly * 100) / 100);
            }
            
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['产能利用率', '行业平均'],
                    top: 0,
                    right: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '25%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: months,
                        axisLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        },
                        axisLabel: {
                            color: '#718096'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#718096',
                            formatter: '{value}%'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '产能利用率',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            opacity: 0.3
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#4299e1'
                        },
                        data: capacityTrend
                    },
                    {
                        name: '行业平均',
                        type: 'line',
                        stack: 'Total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#a0aec0'
                        },
                        data: industryAverage
                    }
                ]
            };
            chart.setOption(option);
        },
        initSafetyIssuesChart() {
            // 检查DOM元素是否存在
            if (!this.$refs.safetyIssuesChart) {
                return;
            }
            
            const chart = echarts.init(this.$refs.safetyIssuesChart);
            
            // 基于企业数据动态统计安全隐患
            const issueCategories = ['设备隐患', '工艺隐患', '消防隐患', '电气隐患', '特种设备', '其他隐患'];
            const issueStats = {
                '已整改': new Array(issueCategories.length).fill(0),
                '整改中': new Array(issueCategories.length).fill(0),
                '未整改': new Array(issueCategories.length).fill(0)
            };
            
            // 统计企业安全隐患数据
            this.filteredCompanyList.forEach(company => {
                if (company.issues && Array.isArray(company.issues)) {
                    company.issues.forEach(issue => {
                        // 根据安全等级和改进率判断整改状态
                        let status = '未整改';
                        if (company.improvementRate >= 90) {
                            status = '已整改';
                        } else if (company.improvementRate >= 50) {
                            status = '整改中';
                        }
                        
                        // 根据问题描述分类到不同的隐患类型
                        let categoryIndex = 5; // 默认为"其他隐患"
                        if (issue.includes('设备') || issue.includes('机械')) {
                            categoryIndex = 0; // 设备隐患
                        } else if (issue.includes('工艺') || issue.includes('流程')) {
                            categoryIndex = 1; // 工艺隐患
                        } else if (issue.includes('消防') || issue.includes('火灾')) {
                            categoryIndex = 2; // 消防隐患
                        } else if (issue.includes('电气') || issue.includes('电力')) {
                            categoryIndex = 3; // 电气隐患
                        } else if (issue.includes('特种设备') || issue.includes('压力容器')) {
                            categoryIndex = 4; // 特种设备
                        }
                        
                        issueStats[status][categoryIndex]++;
                    });
                } else {
                    // 如果没有具体问题列表，根据安全等级生成模拟数据
                    const baseIssues = company.safetyLevel === 'A级' ? 1 : 
                                     company.safetyLevel === 'B级' ? 3 : 5;
                    
                    for (let i = 0; i < issueCategories.length; i++) {
                        const issueCount = Math.floor(Math.random() * baseIssues) + 1;
                        if (company.improvementRate >= 90) {
                            issueStats['已整改'][i] += issueCount;
                        } else if (company.improvementRate >= 50) {
                            issueStats['整改中'][i] += Math.floor(issueCount * 0.7);
                            issueStats['未整改'][i] += Math.ceil(issueCount * 0.3);
                        } else {
                            issueStats['整改中'][i] += Math.floor(issueCount * 0.3);
                            issueStats['未整改'][i] += Math.ceil(issueCount * 0.7);
                        }
                    }
                }
            });
            
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['已整改', '整改中', '未整改'],
                    top: 0,
                    right: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '25%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: issueCategories,
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisLabel: {
                        color: '#718096',
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#718096'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    }
                },
                series: [
                    {
                        name: '已整改',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#48bb78'
                        },
                        data: issueStats['已整改']
                    },
                    {
                        name: '整改中',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#ecc94b'
                        },
                        data: issueStats['整改中']
                    },
                    {
                        name: '未整改',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#f56565'
                        },
                        data: issueStats['未整改']
                    }
                ]
            };
            chart.setOption(option);
        },
        initEnvironmentalComplianceChart() {
            // 检查DOM元素是否存在
            if (!this.$refs.environmentalComplianceChart) {               
                return;
            }
            
            const chart = echarts.init(this.$refs.environmentalComplianceChart);
            
            // 基于企业数据动态统计环保达标情况
            const complianceStats = {
                '达标排放': 0,
                '轻微超标': 0,
                '严重超标': 0,
                '未监测': 0
            };
            
            this.filteredCompanyList.forEach(company => {
                if (company.environmentalRate !== undefined && company.environmentalRate !== null) {
                    const rate = parseFloat(company.environmentalRate);
                    if (rate >= 95) {
                        complianceStats['达标排放']++;
                    } else if (rate >= 80) {
                        complianceStats['轻微超标']++;
                    } else if (rate >= 60) {
                        complianceStats['严重超标']++;
                    } else {
                        complianceStats['严重超标']++;
                    }
                } else {
                    complianceStats['未监测']++;
                }
            });
            
            // 转换为图表数据格式
            const pieData = [
                { value: complianceStats['达标排放'], name: '达标排放', itemStyle: { color: '#48bb78' } },
                { value: complianceStats['轻微超标'], name: '轻微超标', itemStyle: { color: '#ecc94b' } },
                { value: complianceStats['严重超标'], name: '严重超标', itemStyle: { color: '#f56565' } },
                { value: complianceStats['未监测'], name: '未监测', itemStyle: { color: '#a0aec0' } }
            ].filter(item => item.value > 0); // 过滤掉数值为0的项
            
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} 家企业 ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: pieData.map(item => item.name)
                },
                series: [
                    {
                        name: '环保达标情况',
                        type: 'pie',
                        radius: ['45%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: pieData
                    }
                ]
            };
            chart.setOption(option);
        },

        addNewCompany() {
            // 验证必填字段
            if (!this.newCompany.name || !this.newCompany.type || !this.newCompany.region ||
                !this.newCompany.products || !this.newCompany.production || !this.newCompany.status) {
                ElMessage.error('请填写必填字段');
                return;
            }
            // 根据状态设置对应的样式类
            let statusClass = '';
            let safetyLevelClass = '';
            let monitoringStatusClass = '';
            switch (this.newCompany.status) {
                case '正常运营':
                    statusClass = 'bg-green-100 text-green-800';
                    break;
                case '整改中':
                    statusClass = 'bg-yellow-100 text-yellow-800';
                    break;
                case '停产整顿':
                    statusClass = 'bg-red-100 text-red-800';
                    break;
                default:
                    statusClass = 'bg-gray-100 text-gray-800';
            }
            switch (this.newCompany.safetyLevel) {
                case 'A级':
                    safetyLevelClass = 'bg-green-100 text-green-800';
                    break;
                case 'B级':
                    safetyLevelClass = 'bg-yellow-100 text-yellow-800';
                    break;
                case 'C级':
                    safetyLevelClass = 'bg-red-100 text-red-800';
                    break;
                default:
                    safetyLevelClass = 'bg-gray-100 text-gray-800';
            }
            switch (this.newCompany.monitoringStatus) {
                case '在线正常':
                    monitoringStatusClass = 'text-green-600';
                    break;
                case '部分异常':
                case '数据异常':
                    monitoringStatusClass = 'text-yellow-600';
                    break;
                case '离线':
                    monitoringStatusClass = 'text-red-600';
                    break;
                default:
                    monitoringStatusClass = 'text-gray-600';
            }
            // 创建新企业对象
            const newCompanyObj = {
                name: this.newCompany.name,
                type: this.newCompany.type,
                region: this.newCompany.region,
                address: this.newCompany.address || '未填写',
                contact: this.newCompany.legalPerson ? `${this.newCompany.legalPerson} (${this.newCompany.phone || '未填写'})` : '未填写',
                capacity: parseInt(this.newCompany.capacity) || 0,
                products: this.newCompany.products,
                production: this.newCompany.production,
                safetyLevel: this.newCompany.safetyLevel || '未评级',
                safetyLevelClass,
                issues: parseInt(this.newCompany.issues) || 0,
                improvementRate: parseInt(this.newCompany.improvementRate) || 0,
                environmentalRate: parseInt(this.newCompany.environmentalRate) || 0,
                monitoringStatus: this.newCompany.monitoringStatus || '未监测',
                monitoringStatusClass,
                lastInspection: new Date().toISOString().split('T')[0], // 当前日期
                status: this.newCompany.status,
                statusClass
            };
            // 添加到列表开头
            this.companyList.unshift(newCompanyObj);
            // 同时添加到筛选列表开头
            this.filteredCompanyList.unshift(newCompanyObj);
            // 重置分页到第一页
            this.resetPagination();
            // 关闭模态框并重置表单
            this.showAddCompanyModal = false;
            this.resetNewCompanyForm();
            // 显示成功提示
           ElMessage.success(`企业 "${newCompanyObj.name}" 添加成功！`);
        },
        resetNewCompanyForm() {
            this.newCompany = {
                name: '',
                type: '',
                region: '',
                capital: '',
                established: '',
                legalPerson: '',
                phone: '',
                address: '',
                products: '',
                production: '',
                capacity: '',
                employees: '',
                equipment: '',
                productionLines: '',
                status: '',
                safetyLevel: '',
                issues: '',
                improvementRate: '',
                accidents: '',
                environmentalRate: '',
                monitoringStatus: '',
                environmentalFacilities: '',
                pollutionPermit: ''
            };
        },
        // 分页操作方法
        goToPage(page) {
            if (page >= 1 && page <= this.totalPages) {
                this.currentPage = page;
            }
        },
        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
            }
        },
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
            }
        },
        changePageSize(newSize) {
            this.pageSize = newSize;
            // 重新计算当前页，确保不超出范围
            const maxPage = Math.ceil(this.totalItems / this.pageSize);
            if (this.currentPage > maxPage) {
                this.currentPage = Math.max(1, maxPage);
            }
        },
        // 重置分页到第一页（用于筛选后）
        resetPagination() {
            this.currentPage = 1;
        },
        // 导出企业数据
        async exportCompanyData() {
            // 防止重复点击
            if (this.isExporting) {
                return;
            }

            try {
                // 设置导出状态
                this.isExporting = true;
                this.exportProgress = 0;

                // 获取要导出的数据（当前筛选后的数据）
                const dataToExport = this.filteredCompanyList;
                
                if (dataToExport.length === 0) {
                    ElMessage.error('没有可导出的数据！');
                    this.isExporting = false;
                    return;
                }

                // 模拟进度更新
                this.exportProgress = 20;
                await new Promise(resolve => setTimeout(resolve, 100));

                // 定义CSV表头
                const headers = [
                    '企业名称',
                    '企业地址', 
                    '联系人',
                    '所属地区',
                    '企业类型',
                    '产能规模',
                    '主要产品',
                    '生产情况',
                    '安全等级',
                    '存在问题',
                    '整改率',
                    '环保达标率',
                    '监测状态',
                    '最后检查时间',
                    '运营状态'
                ];

                this.exportProgress = 40;
                await new Promise(resolve => setTimeout(resolve, 100));

                // 准备CSV数据
                const csvData = dataToExport.map(company => [
                    `"${company.name || ''}"`,
                    `"${company.address || ''}"`,
                    `"${company.contact || ''}"`,
                    `"${company.region || ''}"`,
                    `"${company.type || ''}"`,
                    `"${company.capacity || ''}"`,
                    `"${company.products || ''}"`,
                    `"${company.production || ''}"`,
                    `"${company.safetyLevel || ''}"`,
                    `"${company.issues || ''}"`,
                    `"${company.improvementRate || ''}"`,
                    `"${company.environmentalRate || ''}"`,
                    `"${company.monitoringStatus || ''}"`,
                    `"${company.lastInspection || ''}"`,
                    `"${company.status || ''}"`
                ]);

                this.exportProgress = 60;
                await new Promise(resolve => setTimeout(resolve, 100));

                // 组合CSV内容
                const csvContent = [
                    headers.join(','),
                    ...csvData.map(row => row.join(','))
                ].join('\n');

                this.exportProgress = 80;
                await new Promise(resolve => setTimeout(resolve, 100));

                // 添加BOM以支持中文
                const BOM = '\uFEFF';
                const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });

                // 创建下载链接
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                
                // 生成文件名
                const now = new Date();
                const timestamp = now.toISOString().slice(0, 19).replace(/:/g, '-');
                link.setAttribute('download', `企业信息列表_${timestamp}.csv`);
                
                this.exportProgress = 90;
                await new Promise(resolve => setTimeout(resolve, 100));

                // 触发下载
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                // 清理URL对象
                URL.revokeObjectURL(url);
                
                this.exportProgress = 100;
                await new Promise(resolve => setTimeout(resolve, 200));
                
                // 显示成功消息
                ElMessage.success(`企业数据导出成功！\n共导出 ${dataToExport.length} 条记录\n文件名：企业信息列表_${timestamp}.csv`);
                
            } catch (error) {
                ElMessage.error('导出失败，请重试！');
            } finally {
                // 重置导出状态
                this.isExporting = false;
                this.exportProgress = 0;
            }
        },
        // 导出企业详情报告
        exportCompanyReport() {
            if (!this.selectedCompany) {
                ElMessage.error('请先选择企业！');
                return;
            }
            
            try {
                // 生成报告内容
                const reportContent = this.generateCompanyReport(this.selectedCompany);
                
                // 创建Blob对象
                const BOM = '\uFEFF';
                const blob = new Blob([BOM + reportContent], { type: 'text/plain;charset=utf-8;' });
                
                // 创建下载链接
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                
                // 生成文件名
                const now = new Date();
                const timestamp = now.toISOString().slice(0, 19).replace(/:/g, '-');
                link.setAttribute('download', `${this.selectedCompany.name}_详情报告_${timestamp}.txt`);
                
                // 触发下载
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                // 清理URL对象
                URL.revokeObjectURL(url);
                
                ElMessage.success('企业详情报告导出成功！');
            } catch (error) {
                ElMessage.error('导出失败，请重试！');
            }
        },
        // 生成企业报告内容
        generateCompanyReport(company) {
            const now = new Date();
            const reportDate = now.toLocaleDateString('zh-CN');
            
            return `企业详情报告
=====================================

报告生成时间：${reportDate}

企业基本信息
-------------------------------------
企业名称：${company.name}
企业地址：${company.address}
联系方式：${company.contact}
所属区域：${company.region}
企业类型：${company.type}

生产运营情况
-------------------------------------
产能利用率：${company.capacity}%
主要产品：${company.products}
年产量：${company.production}

安全环保情况
-------------------------------------
安全等级：${company.safetyLevel}
安全隐患数：${company.issues}个
整改完成率：${company.improvementRate}%
环保达标率：${company.environmentalRate}%

监测状态
-------------------------------------
监测状态：${company.monitoringStatus}
最后检查时间：${company.lastInspection}
运营状态：${company.status}

历史趋势数据
-------------------------------------
产能利用率趋势：75% → 78% → 80% → 82% → 85%
环保达标率趋势：88% → 90% → 92% → 94% → 96%
安全隐患数趋势：12个 → 10个 → 7个 → 5个 → 3个

备注：本报告基于系统监测数据生成，仅供参考。
=====================================`;
        },
        // 编辑企业信息
        editCompanyInfo() {
            if (!this.selectedCompany) {
                ElMessage.error('请先选择企业！');
                return;
            }
            
            // 启动编辑模式
            this.isEditMode = true;
            
            // 复制当前企业信息到编辑表单
            this.editForm = {
                name: this.selectedCompany.name,
                type: this.selectedCompany.type,
                region: this.selectedCompany.region,
                capital: this.selectedCompany.capital,
                established: this.selectedCompany.established,
                legalPerson: this.selectedCompany.legalPerson,
                phone: this.selectedCompany.phone,
                address: this.selectedCompany.address,
                products: this.selectedCompany.products,
                production: this.selectedCompany.production,
                capacity: this.selectedCompany.capacity,
                employees: this.selectedCompany.employees,
                equipment: this.selectedCompany.equipment,
                productionLines: this.selectedCompany.productionLines,
                status: this.selectedCompany.status,
                safetyLevel: this.selectedCompany.safetyLevel,
                environmentalFacilities: this.selectedCompany.environmentalFacilities
            };
            
            // 清空错误信息
            this.editFormErrors = {};
        },
        
        // 保存编辑
        saveCompanyInfo() {
            // 验证表单
            if (!this.validateEditForm()) {
                return;
            }
            
            // 更新 selectedCompany 数据
            Object.assign(this.selectedCompany, this.editForm);
            
            // 更新状态样式类
            this.updateStatusClasses();
            
            // 退出编辑模式
            this.isEditMode = false;
            
            // 显示成功消息
            ElMessage.success('企业信息更新成功！');
        },
        
        // 取消编辑
        cancelEdit() {
            this.isEditMode = false;
            this.editForm = {};
            this.editFormErrors = {};
        },
        
        // 验证编辑表单
        validateEditForm() {
            this.editFormErrors = {};
            let isValid = true;
            
            // 必填字段验证
            const requiredFields = {
                name: '企业名称',
                type: '企业类型',
                region: '所属区域',
                legalPerson: '法定代表人',
                phone: '联系电话',
                address: '企业地址',
                status: '运营状态',
                safetyLevel: '安全等级'
            };
            
            for (const [field, label] of Object.entries(requiredFields)) {
                if (!this.editForm[field] || this.editForm[field].trim() === '') {
                    this.editFormErrors[field] = `${label}不能为空`;
                    isValid = false;
                }
            }
            
            // 电话号码格式验证
            if (this.editForm.phone && !/^[\d\-\(\)\s]+$/.test(this.editForm.phone)) {
                this.editFormErrors.phone = '请输入有效的电话号码';
                isValid = false;
            }
            
            // 产能利用率验证
            if (this.editForm.capacity && (this.editForm.capacity < 0 || this.editForm.capacity > 100)) {
                this.editFormErrors.capacity = '产能利用率应在0-100之间';
                isValid = false;
            }
            
            return isValid;
        },
        
        // 更新状态样式类
        updateStatusClasses() {
            // 根据运营状态设置样式类
            switch (this.selectedCompany.status) {
                case '正常运营':
                    this.selectedCompany.statusClass = 'bg-green-100 text-green-800';
                    break;
                case '整改中':
                    this.selectedCompany.statusClass = 'bg-yellow-100 text-yellow-800';
                    break;
                case '停产整顿':
                    this.selectedCompany.statusClass = 'bg-red-100 text-red-800';
                    break;
                default:
                    this.selectedCompany.statusClass = 'bg-gray-100 text-gray-800';
            }
            
            // 根据安全等级设置样式类
            switch (this.selectedCompany.safetyLevel) {
                case 'A级':
                    this.selectedCompany.safetyLevelClass = 'bg-green-100 text-green-800';
                    break;
                case 'B级':
                    this.selectedCompany.safetyLevelClass = 'bg-yellow-100 text-yellow-800';
                    break;
                case 'C级':
                    this.selectedCompany.safetyLevelClass = 'bg-red-100 text-red-800';
                    break;
                default:
                    this.selectedCompany.safetyLevelClass = 'bg-gray-100 text-gray-800';
            }
        },
        
        // 从列表编辑企业信息
        editCompanyFromList(company) {
            // 设置选中的企业
            this.selectedCompany = { ...company };
            // 显示详情弹框
            this.showDetailsModal = true;
            // 直接进入编辑模式
            this.editCompanyInfo();
        },
        
        // 从列表导出企业报告
        exportCompanyReportFromList(company) {
            // 设置选中的企业
            this.selectedCompany = { ...company };
            // 调用现有的导出报告方法
            this.exportCompanyReport();
        }
    },
    watch: {
        // 监听筛选条件变化，重置分页
        filteredCompanyList() {
            this.resetPagination();
        }
    }
};
</script>
<style scoped>
/* 自定义样式 */
.toggle-checkbox:checked {
    right: 0;
    border-color: #3182ce;
}

.toggle-checkbox:checked+.toggle-label {
    background-color: #3182ce;
}

.toggle-label {
    transition: background-color 0.3s ease;
}

/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 模态框最大高度 */
.max-h-90vh {
    max-height: 90vh;
}
</style>